package com.lly.ui

import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.State
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun Yin(
    color: State<Color>,
    modifier: Modifier,
    spaceRate: Float = 0.3f
) {
    Row(modifier = modifier) {
        Yang(
            color = color, modifier = Modifier
                .fillMaxHeight()
                .weight(1f)
        )
        Spacer(modifier = Modifier.weight(spaceRate))
        Yang(
            color = color, modifier = Modifier
                .fillMaxHeight()
                .weight(1.0f)
        )

    }
}

@Composable
fun Yang(
    color: State<Color>,
    modifier: Modifier,
) {
    Canvas(modifier.fillMaxWidth()) {
        drawRoundRect(
            color = color.value,
            topLeft = Offset(0f, 0f),
            size = size
        )
    }
}

class Yao(val isYang: Boolean = true, val isSelected: MutableState<Boolean> = mutableStateOf(false))

@Preview(widthDp = 200, heightDp = 200)
@Composable
fun Gou() {
    val yaoes = (1..6).map { Yao(isYang = it != 1) }
    yaoes[0].isSelected.value = true
    val isSplitInnerAndOuter = true
    val selectedColor: Color = Color.Green
    val color: Color = Color.Red
    GuaView(
        yaoes,
        selectedColor,
        color,
        0.3f,
        isSplitInnerAndOuter,
        Modifier
            .size(80.dp, 40.dp)
            .padding(8.dp)
    )
}

@Composable()
fun GuaView(
    yaoes: List<Yao>,
    selectedColor: Color,
    color: Color,
    spaceRate: Float = 0.3f,
    isSplitInnerAndOuter: Boolean = true,
    modifier: Modifier = Modifier.height(80.dp),
) {
    Box {
        Column(
            modifier = modifier,
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            check(arrayOf(3, 6).any { it == yaoes.size }) { "爻数只能是3或6" }
            val data = yaoes.reversed()
            val layoutYao: @Composable (index: Int, Yao) -> Unit = { index, yao ->
                Yao(
                    yao, selectedColor, color,
                    Modifier
                        .fillMaxWidth()
                        .height(10.dp)
                        .weight(1f),
                    spaceRate
                )
                if (index < 2) {
                    Spacer(
                        modifier = Modifier
                            .height(0.dp)
                            .weight(1.0f)
                    )

                }
            }
            for ((index, yao) in data.take(3).withIndex()) {
                layoutYao(index, yao)
            }
            if (data.size == 6) {
                if (isSplitInnerAndOuter) {
                    Spacer(
                        modifier = Modifier
                            .weight(1.8f)
                    )
                }
                for ((index, yao) in data.takeLast(3).withIndex()) {
                    layoutYao(index, yao)
                }
            }
        }
    }
}


@Composable
private fun Yao(
    it: Yao,
    selectedColor: Color,
    color: Color,
    modifier: Modifier,
    spaceRate: Float
) {
    val colorAsState = animateColorAsState(
        targetValue = if (it.isSelected.value) {
            selectedColor
        } else {
            color
        }, label = "yaoColor"
    )
    if (it.isYang) {
        Yang(colorAsState, modifier)
    } else {
        Yin(colorAsState, modifier, spaceRate)
    }
}